import React, { useState, memo, useMemo } from "react";

const HYinfo = memo((props) => {
  console.log('HYinfo重新渲染');
  return (
    <h2>
      名字: {props.info.name} 年龄: {props.info.age}{' '}
    </h2>
  )
})

export default function MemoHookDemo02() {
  console.log('MemoHookDemo02重新渲染');
  const [show, setShow] = useState(true)

  // const [info, setInfo] = useState({ name: 'zyt', age: 18 })

  // const Info = useMemo(() => {
  //   return info
  // }, [info])

  const info = useMemo(() => {
    return { name: 'zyt', age: 18 }
  }, [])

  // const info = { name: 'zyt', age: 18 }

  // function changInfo() {
  //   const newInfo = { ...info }
  //   newInfo.age += 1
  //   setInfo(newInfo)
  // }


  return (
    <div>
      <HYinfo info={info} />
      <button onClick={(e) => setShow(!show)}>show切换</button>
      {/* <button onClick={(e) => changInfo()}>{info.age}</button> */}
    </div>
  )
}